<template>
  <PageWrapper title="右键菜单示例">
    <CollapseContainer title="Simple">
      <a-button type="primary" @contextmenu="handleContext">
        Right Click on me
      </a-button>
    </CollapseContainer>

    <CollapseContainer title="Multiple" class="mt-4">
      <a-button type="primary" @contextmenu="handleMultipleContext">
        Right Click on me
      </a-button>
    </CollapseContainer>
  </PageWrapper>
</template>
<script lang="ts" setup>
import { useContextMenu } from "@/hooks/web/useContextMenu";
import { CollapseContainer } from "@/components/Container";
import { useMessage } from "@/hooks/web/useMessage";
import { PageWrapper } from "@/components/Page";

const [createContextMenu] = useContextMenu();
const { createMessage } = useMessage();

function handleContext(e: MouseEvent) {
  createContextMenu({
    event: e,
    items: [
      {
        label: "New",
        icon: "bi:plus",
        handler: () => {
          createMessage.success("click new");
        },
      },
      {
        label: "Open",
        icon: "bx:bxs-folder-open",
        handler: () => {
          createMessage.success("click open");
        },
      },
    ],
  });
}

function handleMultipleContext(e: MouseEvent) {
  createContextMenu({
    event: e,
    items: [
      {
        label: "New",
        icon: "bi:plus",

        children: [
          {
            label: "New1-1",
            icon: "bi:plus",
            divider: true,
            children: [
              {
                label: "New1-1-1",
                handler: () => {
                  createMessage.success("click new");
                },
              },
              {
                label: "New1-2-1",
                disabled: true,
              },
            ],
          },
          {
            label: "New1-2",
            icon: "bi:plus",
          },
        ],
      },
    ],
  });
}
</script>
